<script setup lang="ts">
const props=defineProps<{title:string,steps:Array<string>}>()
</script>

<template>
  <div>
    <div class="text-sm font-bold">{{ props.title }}</div>
    <div class="grid w-2/3" :class="{[`grid-cols-${props.steps.length}`]:true}"><div v-for="(item,index) in props.steps">
      <span class="index" v-if="item">{{index+1}}</span><span class="text-sm/4">{{item}}</span>
    </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index{
  border:1px solid;
  color:var(--el-color-primary);
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: inline-block;
  @apply bg-blue-100;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  margin-top: 10px;
}
</style>